import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus';
import { addTuanTeamAPI, updateTuanTeamAPI } from "../../api/tuan";
import { uploadFile } from "../../api/common"

/**
 * @description: 新增/编辑表单
 * @param {Function} query 查询列表方法
 * @return {*}
 */
export default function useForm(query: Function, corpper: any) {
    // 表单相关
    const dialogVisible = ref(false);
    const formRef = ref();
    const isEdit = ref(false);
    const upload = ref();
    const editor = ref();
    const form = reactive({
        id: '',
        name: '',
        duty: '',
        dept: '',
        phone: '',
        filePath: '',
    })

    // 新增/编辑 操作
    const handleEdit = (item: any) => {
        // 编辑回填
        if (item) {
            isEdit.value = true;
            form.id = item.id;
            form.name = item.name;
            form.duty = item.duty;
            form.dept = item.dept;
            form.phone = item.phone;
            form.filePath = item.filePath;
        }
        // 新增清空
        else {
            isEdit.value = false;
            form.id = "";
            form.name = "";
            form.duty = "";
            form.dept = "";
            form.phone = "";
            form.filePath = "";
        }
        dialogVisible.value = true;
    };

    const base64ToFile = (base64String: any, fileName: any) => {
        const byteString = atob(base64String.split(',')[1]); // 将base64字符串去掉前缀
        const ab = new ArrayBuffer(byteString.length);
        const ia = new Uint8Array(ab);
        for (let i = 0; i < byteString.length; i++) {
          ia[i] = byteString.charCodeAt(i);
        }
        const blob = new Blob([ab], { type: 'application/octet-stream' }); // 创建Blob对象
        const file = new File([blob], fileName); // 创建File对象
        return file;
    }

    // 确定 新增/编辑 操作
    const handleConfirm = () => {
        formRef.value.validate((valid: any, fields: any) => {
            if (valid) {
                if (!isEdit.value) {
                    // 新增
                    const file = base64ToFile(corpper.value.imgUrl, '照片.jpg');
                    const formData = new FormData();
                    formData.append('file', file);
                    uploadFile(formData).then((res) => {
                        let params = {
                            id: form.id,
                            name: form.name,
                            duty: form.duty,
                            dept: form.dept,
                            phone: form.phone,
                            filePath: res.data.url,
                        };
                        addTuanTeamAPI(params).then((res) => {
                            if (res.code === 200) {
                                ElMessage({
                                    message: '新增成功',
                                    type: 'success',
                                })
                            }
                            dialogVisible.value = false;
                            query();
                        })
                    })
                } else {
                    // 编辑
                    const photo = corpper.value.imgUrl;
                    if (photo && photo.startsWith('data')) {
                        const file = base64ToFile(photo, '照片.jpg');
                        const formData = new FormData();
                        formData.append('file', file);
                        uploadFile(formData).then((res) => {
                            let params = {
                                id: form.id,
                                name: form.name,
                                duty: form.duty,
                                dept: form.dept,
                                phone: form.phone,
                                filePath: res.data.url,
                            };
                            updateTuanTeamAPI(params).then((res) => {
                                if (res.code === 200) {
                                    ElMessage({
                                        message: '编辑成功',
                                        type: 'success',
                                    })
                                }
                                dialogVisible.value = false;
                                query();
                            })
                        })
                    } else {
                        let params = {
                            id: form.id,
                            name: form.name,
                            duty: form.duty,
                            dept: form.dept,
                            phone: form.phone,
                            filePath: photo,
                        }; 
                        updateTuanTeamAPI(params).then((res) => {
                            if (res.code === 200) {
                                ElMessage({
                                    message: '编辑成功',
                                    type: 'success',
                                })
                            }
                            dialogVisible.value = false;
                            query();
                        })
                    }
                }
            } else {

            }
        })
    }
   
    return {
        dialogVisible,
        formRef,
        isEdit,
        form,
        upload,
        editor,
        handleEdit,
        handleConfirm,
    }
}